<template>
  <el-drawer
    :modal-append-to-body="false"
    :append-to-body="true"
    size="70%"
    :withHeader="false"
    title="添加/编辑商品"
    :visible.sync="saveCommodityDrawer"
    @close="handleClose"
  >
    <div style="position: relative" v-loading="loading">
      <div class="drawerTitle">
        <span>添加/编辑商品</span>
        <div class="close" @click="handleClose">
          <i class="el-icon-close" style="font-size:24px"></i>
        </div>
      </div>
      <div class="drawerContent" style="padding:6px 30px;">
        <div class="tabsView">
          <el-tabs v-model="activeName">
            <el-tab-pane label="基本信息" name="basic_information">
              <el-form
                ref="basicForm"
                v-loading="loading"
                :model="basicForm"
                label-width="110px"
                :rules="basicRules"
              >
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item
                      class="width100"
                      label="商品类型："
                      prop="type"
                    >
                      <el-radio-group v-model="basicForm.type">
                        <el-radio label="1">普通商品</el-radio>
                        <el-radio label="2">卡密商品</el-radio>
                        <el-radio label="3">虚拟商品</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      class="width90"
                      label="所属供应商："
                      prop="supplier_id"
                    >
                      <el-select
                        class="width90"
                        @change="changes"
                        v-model="basicForm.supplier_id"
                        placeholder="请选择供应商"
                      >
                        <el-option
                          v-for="item in options"
                          :key="item.id"
                          :label="item.supplier_name"
                          :value="item.id"
                        >
                        </el-option>
                      </el-select> </el-form-item
                  ></el-col>
                  <el-col :span="12">
                    <el-form-item
                      class="width90"
                      label="商品类目："
                      prop="category_id"
                    >
                      <el-cascader
                        class="width90"
                        size="mini"
                        v-model="basicForm.category_id"
                        :options="typeData"
                        :props="{
                          expandTrigger: 'hover',
                          checkStrictly: true,
                          value: 'id',
                          label: 'category_name',
                        }"
                        placeholder="请选择类目"
                      ></el-cascader>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      class="width90"
                      label="上下架状态："
                      prop="status"
                    >
                      <el-radio-group v-model="basicForm.status">
                        <el-radio :label="1">上架</el-radio>
                        <el-radio :label="0">下架</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      class="width90"
                      label="商品编码："
                      prop="product_code"
                    >
                      <el-input
                        :disabled="id !== '' ? true : false"
                        class="width90"
                        v-model="basicForm.product_code"
                        maxlength="20"
                        show-word-limit
                        placeholder="选填"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      class="width90"
                      label="商品排序："
                      prop="sort"
                    >
                      <el-input
                        class="width90"
                        v-model="basicForm.sort"
                        onkeyup="value=value.replace(/\D/g,'')"
                        maxlength="8"
                        show-word-limit
                        placeholder="请输入排序"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      class="width90"
                      label="商品名称："
                      prop="goods_name"
                    >
                      <el-input
                        class="width90"
                        v-model="basicForm.goods_name"
                        maxlength="50"
                        show-word-limit
                        placeholder="请输入商品名称"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      class="width90"
                      label="商品副标题："
                      prop="sub_title"
                    >
                      <el-input
                        class="width90"
                        v-model="basicForm.sub_title"
                        maxlength="20"
                        show-word-limit
                        placeholder="请输入商品副标题"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      class="width90"
                      label="商品主图："
                      prop="main_image"
                    >
                      <logo-upload
                        :single-file="main_images"
                        :show-file-list="false"
                        accept="image/jpeg, image/png"
                        @uploadCallback="main_imagesCallback"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      class="width90"
                      label="商品缩略图："
                      prop="thumbnail"
                    >
                      <logo-upload
                        :single-file="thumbnail"
                        :show-file-list="false"
                        accept="image/jpeg, image/png"
                        @uploadCallback="thumbnailsCallback"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      class="width90"
                      label="商品轮播图："
                      prop="slider_image"
                    >
                      <logo-upload
                        :file-list="slider_image"
                        :show-file-list="true"
                        accept="image/jpeg, image/png"
                        @uploadCallback="slider_imagesCallback"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item class="width90" label="备注">
                      <el-input
                        class="width90"
                        type="textarea"
                        v-model="basicForm.remark"
                        placeholder="请输入..."
                        maxlength="100"
                        show-word-limit
                      ></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
              <div class="button-box">
                <el-button
                  @click="activeName = 'inventory_specifications'"
                  class="next-button"
                  >下一步 <i class="el-icon-caret-right el-icon--right"></i
                ></el-button>
              </div>
            </el-tab-pane>
            <el-tab-pane label="库存规格" name="inventory_specifications">
              <el-form
                ref="specificationsForm"
                :rules="specificationsFormRules"
                :model="specificationsForm"
                label-width="120px"
                style="margin-top: 15px"
              >
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item
                      class="width100"
                      label="规格名称："
                      prop="sku_name"
                    >
                      <el-input
                        v-model="specificationsForm.sku_name"
                        maxlength="15"
                        show-word-limit
                        placeholder="请输入规格名称"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      class="width100"
                      label="零售价："
                      prop="retail_price"
                    >
                      <el-input
                        v-model="specificationsForm.retail_price"
                        maxlength="10"
                        show-word-limit
                        placeholder="请输入商品零售价"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      class="width100"
                      label="成本价："
                      prop="cost_price"
                    >
                      <el-input
                        v-model="specificationsForm.cost_price"
                        maxlength="10"
                        show-word-limit
                        placeholder="请输入商品成本价"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      class="width100"
                      label="库存："
                      prop="inventory"
                    >
                      <el-input
                        v-model="specificationsForm.inventory"
                        maxlength="10"
                        show-word-limit
                        placeholder="请输入商品库存"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item class="width100" label="产品码：" prop="code">
                      <el-input
                        :disabled="id !== '' ? true : false"
                        v-model="specificationsForm.code"
                        maxlength="20"
                        show-word-limit
                        placeholder="请输入商品产品码"
                      ></el-input>
                    </el-form-item>
                  </el-col>

                  <el-col :span="12">
                    <el-form-item
                      class="width100"
                      label="库存预警："
                      prop="inventory_alert"
                    >
                      <el-input
                        v-model="specificationsForm.inventory_alert"
                        maxlength="10"
                        show-word-limit
                        placeholder="请输入库存预警"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item class="width100" label="单位：" prop="unit">
                      <el-input
                        v-model="specificationsForm.unit"
                        maxlength="10"
                        show-word-limit
                        placeholder="请输入商品单位"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item
                      class="width90"
                      label="规格图片："
                      prop="sku_img"
                    >
                      <logo-upload
                        :single-file="sku_img"
                        :show-file-list="false"
                        accept="image/jpeg, image/png"
                        @uploadCallback="skuCallback"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
              <div class="button-box">
                <el-button
                  @click="activeName = 'basic_information'"
                  icon="el-icon-caret-left"
                  class="next-button"
                  >上一步</el-button
                >
                <el-button
                  @click="activeName = 'product_details'"
                  class="next-button"
                  >下一步 <i class="el-icon-caret-right el-icon--right"></i
                ></el-button>
              </div>
            </el-tab-pane>
            <el-tab-pane label="商品详情" name="product_details">
              <el-form
                ref="explainForm"
                :rules="explainRules"
                :model="explainForm"
                label-width="80px"
                style="margin-top: 15px"
              >
                <el-row :gutter="20">
                  <el-col :span="24">
                    <el-form-item label="商品详情" prop="detail">
                      <editor-text
                        v-model="explainForm.detail"
                        :height="700"
                        @input="editorclick"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
              <div class="button-box">
                <el-button
                  @click="activeName = 'inventory_specifications'"
                  icon="el-icon-caret-left"
                  class="next-button"
                  >上一步</el-button
                >
                <el-button class="next-button" @click="saveSubmit"
                  >保存</el-button
                >
                <!-- <el-button
                  @click="activeName = 'logistics_settings'"
                  class="next-button"
                  >下一步 <i class="el-icon-caret-right el-icon--right"></i
                ></el-button> -->
              </div>
            </el-tab-pane>
            <!-- <el-tab-pane label="物流设置" name="logistics_settings">
              <el-form
                ref="logisticsForm"
                label-width="100px"
                :model="logisticsForm"
                :rules="logisticsRules"
              >
                <el-form-item
                  label="运费设置："
                  prop="shipping_type"
                  style="margin-top: 15px"
                >
                  <el-radio-group
                    v-model="logisticsForm.shipping_type"
                    @change="shipping_typeChange"
                  >
                    <el-radio :label="1">固定运费</el-radio>
                    <el-radio :label="2">运费模版</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item
                  label="运费设置："
                  v-if="logisticsForm.shipping_type == 1"
                  prop="shipping_fee"
                >
                  <el-input
                    type="number"
                    v-model="logisticsForm.shipping_fee"
                    placeholder="请输入运费"
                    style="width: 300px"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="运费模版："
                  v-if="logisticsForm.shipping_type == 2"
                  prop="freight_template_id"
                >
                  <el-select
                    @change="changefreight"
                    v-model="logisticsForm.freight_template_id"
                    placeholder="请选择运费模版"
                    style="width: 510px"
                  >
                    <el-option
                      v-for="item in freight_template"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <div class="button-box">
                <el-button
                  @click="activeName = 'product_details'"
                  icon="el-icon-caret-left"
                  class="next-button"
                  >上一步</el-button
                >
                <el-button class="next-button" @click="saveSubmit"
                  >保存</el-button
                >
              </div>
            </el-tab-pane> -->
          </el-tabs>
        </div>
        <!-- <div class="chengeContent">
          <basic-information
            @activeNameChange="activeNameChange"
            v-if="activeName == 'basic_information'"
          ></basic-information>
        </div> -->
      </div>
    </div>
  </el-drawer>
</template>

<script>
import {
  getCateLisNew,
  supplierLists,
  addsuppliergoods,
  getLabelList,
  freightgetList,
  getSupplierGoodsInfo,
} from "@/api/supplier/index";
import LogoUpload from "@/components/FileUpload";
import TinymceEditor from "@/components/Tinymce";
export default {
  components: { LogoUpload, TinymceEditor },
  data() {
    return {
      id: "",
      saveCommodityDrawer: false,
      activeName: "basic_information",
      loading: true,
      basicForm: {
        supplier_id: "", // 供货商id
        category_id: "", // 商品类目
        type: "1", // 商品类型
        main_image: "", // 商品主图
        thumbnail: "", // 商品缩略图
        slider_image: "", // 商品轮播图
        status: 0, // 上下架状态
        remark: "", // 备注
        product_code: "", // 商品编码
        sort: "", // 排序
        goods_name: "", // 商品名称
        sub_title: "", // 商品副标题
      },
      typeData: [], // 类目列表
      options: [], // 供应商列表
      main_images: {}, // 商品主图
      thumbnail: {}, // 商品缩略图
      slider_image: [], // 商品轮播图
      basicRules: {
        type: [
          {
            required: true,
            validator: (rule, value, callback) => {
              callback();
            },
            trigger: "change",
          },
        ],
        supplier_id: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value == "") {
                return callback(new Error("请选择所属供应商"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
        category_id: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value == "") {
                return callback(new Error("请选择商品类目"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
        status: [
          {
            required: true,
            validator: (rule, value, callback) => {
              callback();
            },
            trigger: "change",
          },
        ],
        product_code: [
          {
            required: false,
            validator: (rule, value, callback) => {
              const req = /[^0-9a-zA-Z]/g;
              if (value !== "") {
                if (req.test(value)) {
                  return callback(new Error("编码只能为数字和字母"));
                }
                callback();
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        sort: [
          {
            required: true,
            validator: (rule, value, callback) => {
              callback();
            },
            trigger: "change",
          },
        ],
        sub_title: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value == "") {
                callback(new Error("请输入商品副标题"));
              } else {
                callback();
              }
            },
            trigger: "change",
          },
        ],
        goods_name: [
          {
            required: true,
            validator: (rule, value, callback) => {
              const req = /[^0-9a-zA-Z\u4e00-\u9fa5]/g;
              if (value == "") {
                callback(new Error("请输入商品名称"));
              } else {
                callback();
              }
              // if (value == "") {
              //   callback(new Error("请输入商品名称"));
              // } else {
              //   if (req.test(value)) {
              //     return callback(new Error("商品名称中,不能存在特殊字符"));
              //   }
              //   callback();
              // }
            },
            trigger: "change",
          },
        ],
        main_image: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!this.main_images.url) {
                return callback(new Error("请上传商品主图"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
        thumbnail: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!this.thumbnail.url) {
                return callback(new Error("请上传商品缩略图"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
        slider_image: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (this.slider_image.length == 0) {
                return callback(new Error("请上传至少一张轮播图"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
      },
      specificationsForm: {
        id: 0,
        sku_img: "",
        unit: "",
        inventory_alert: 0,
        code: "",
        inventory: "",
        cost_price: "",
        retail_price: "",
        sku_name: "",
      },
      sku_img: {},
      specificationsFormRules: {
        sku_img: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!this.sku_img.url) {
                return callback(new Error("请上传规格图片"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
        sku_name: [
          {
            required: true,
            validator: (rule, value, callback) => {
              const req = /[^0-9a-zA-Z\u4e00-\u9fa5]/g;
              if (value == "") {
                callback(new Error("请输入规格名称"));
              } else {
                if (req.test(value)) {
                  return callback(new Error("规格名称中,不能存在特殊字符"));
                }
                callback();
              }
            },
            trigger: "change",
          },
        ],
        sku_name: [
          {
            required: true,
            validator: (rule, value, callback) => {
              const req = /[^0-9a-zA-Z\u4e00-\u9fa5]/g;
              if (value == "") {
                callback(new Error("请输入规格名称"));
              } else {
                if (req.test(value)) {
                  return callback(new Error("规格名称中,不能存在特殊字符"));
                }
                callback();
              }
            },
            trigger: "change",
          },
        ],
        retail_price: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error("请输入零售价"));
              } else {
                if (Number(value) > 1000000) {
                  return callback(new Error("不能大于1000000"));
                }
                let req = /^\d+(\.\d{1,2})?$/;
                if (req.test(value)) {
                  callback();
                } else {
                  callback(new Error("最多只能保留两位小数"));
                }
              }
            },
            trigger: "change",
          },
        ],
        cost_price: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error("请输入成本价"));
              } else {
                if (Number(value) > 1000000) {
                  return callback(new Error("不能大于1000000"));
                }
                let req = /^\d+(\.\d{1,2})?$/;
                if (req.test(value)) {
                  callback();
                } else {
                  callback(new Error("最多只能保留两位小数"));
                }
              }
            },
            trigger: "change",
          },
        ],
        inventory: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (String(value).indexOf(".") !== -1) {
                return callback(new Error("请输入整数"));
              }
              if (value === "") {
                return callback(new Error("请输入库存"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
        unit: [{ required: true, message: "请选择单位", trigger: "change" }],
      },
      explainForm: {
        detail: "",
      },
      explainRules: {
        detail: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value == "") {
                return callback(new Error("请填写商品详情"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
      },
      logisticsForm: {
        shipping_type: 1,
        shipping_fee: "",
        freight_template_id: "",
      },
      logisticsRules: {
        shipping_type: [
          {
            required: true,
            validator: (rule, value, callback) => {
              callback();
            },
            trigger: "change",
          },
        ],
        freight_template_id: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value == "") {
                return callback(new Error("请选择运费模版"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
        shipping_fee: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value == "") {
                return callback(new Error("请填写运费"));
              }
              callback();
            },
            trigger: "change",
          },
        ],
      },
      freight_template: [],
    };
  },
  mounted() {
    const p1 = new Promise((req, rej) => {
      getCateLisNew().then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          rej();
          return this.$messages.error(res.msg);
        }
        req();
        this.typeData = res.data;
      });
    });
    const p2 = new Promise((req, rej) => {
      supplierLists().then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          rej();
          return this.$messages.error(res.msg);
        }
        req();
        this.options = res.data;
      });
    });
    // const p4 = new Promise((req, rej) => {
    //   freightgetList().then((res) => {
    //     if (res.code !== 200 || res.status !== 1) {
    //       rej();
    //       return this.$messages.error(res.msg);
    //     }
    //     req();
    //     this.freight_template = res.data.list;
    //   });
    // });
    Promise.all([p2, p1])
      .then(() => {
        this.loading = false;
        // this.shipping_typeChange(this.logisticsForm.shipping_type);
      })
      .catch(() => {
        this.loading = false;
      });
  },
  methods: {
    openSaveCommodity(id) {
      if (!isNaN(id)) {
        this.saveCommodityDrawer = true;
        this.getcommodityInfo(id);
      } else {
        this.saveCommodityDrawer = true;
      }
    },
    getcommodityInfo(id) {
      this.loading = true;
      this.id = id;
      let param = {
        id: id,
      };
      getSupplierGoodsInfo(param).then((res) => {
        (this.basicForm.supplier_id = res.data.supplier_id),
          (this.basicForm.category_id = []);
        if (res.data.category1_id) {
          this.basicForm.category_id.push(res.data.category1_id);
        }
        if (res.data.category2_id) {
          this.basicForm.category_id.push(res.data.category2_id);
        }
        if (res.data.category3_id) {
          this.basicForm.category_id.push(res.data.category3_id);
        }
        this.basicForm.type = res.data.type.toString();
        this.main_imagesCallback({
          url: res.data.main_image,
        });
        this.thumbnailsCallback({
          url: res.data.thumbnail,
        });
        let arr = [];
        res.data.slider_image.forEach((item) => {
          arr.push({
            url: item,
          });
        });
        this.slider_imagesCallback(arr);
        this.basicForm.status = res.data.status;
        this.basicForm.remark = res.data.remark;
        this.basicForm.product_code = res.data.product_code;
        this.basicForm.sort = res.data.sort;
        this.basicForm.goods_name = res.data.goods_name;
        this.basicForm.sub_title = res.data.sub_title;

        this.specificationsForm.id = res.data.goods_product[0].id;
        this.skuCallback({ url: res.data.goods_product[0].sku_img });
        this.specificationsForm.sku_img = res.data.goods_product[0].sku_img;
        this.specificationsForm.unit = res.data.goods_product[0].unit;
        this.specificationsForm.inventory_alert =
          res.data.goods_product[0].inventory_alert;
        this.specificationsForm.code = res.data.goods_product[0].code;
        this.specificationsForm.inventory = res.data.goods_product[0].inventory;
        this.specificationsForm.cost_price =
          res.data.goods_product[0].cost_price;
        this.specificationsForm.retail_price =
          res.data.goods_product[0].retail_price;
        this.specificationsForm.sku_name = res.data.goods_product[0].sku_name;

        this.explainForm.detail = res.data.goods_detail.detail;

        // this.logisticsForm.shipping_type = res.data.shipping_type;
        // this.logisticsForm.shipping_fee = res.data.shipping_fee;
        // this.logisticsForm.freight_template_id = res.data.freight_template_id;
        this.loading = false;
      });
    },
    handleClose() {
      this.saveCommodityDrawer = false;
      // this.$nextTick(() => {
      //   this.$parent.closeCommodityDrawer();
      // });
    },
    //切换供应商ID
    changes(val) {
      this.basicForm.supplier_id = val;
    },
    // 文件上传回调
    main_imagesCallback(singleFile) {
      this.main_images = singleFile;
      if (singleFile.url) {
        this.basicForm.main_image = singleFile.url;
      } else {
        this.basicForm.main_image = "";
      }
    },
    // 缩略图上传回调
    thumbnailsCallback(singleFile) {
      console.log(singleFile);
      this.thumbnail = singleFile;
      if (singleFile.url) {
        this.basicForm.thumbnail = singleFile.url;
      } else {
        this.basicForm.thumbnail = "";
      }
    },
    // 轮播图上传回调
    slider_imagesCallback(singleFile) {
      this.slider_image = singleFile;
      let obj = [];
      singleFile.forEach((item) => {
        obj.push(item.url);
      });
      this.basicForm.slider_image = obj.toString();
    },
    // 规格图片上传回调
    skuCallback(singleFile) {
      this.sku_img = singleFile;
      this.specificationsForm.sku_img = singleFile.url;
    },
    // 商品详情回调
    editorclick(e) {
      this.explainForm.detail = e;
    },
    // 运费设置回调
    // shipping_typeChange(val) {
    //   if (val === 1) {
    //     this.logisticsForm.freight_template_id = "";
    //   } else {
    //     this.logisticsForm.shipping_fee = "";
    //   }
    //   this.logisticsForm.shipping_type = val;
    // },
    //切换运费模版ID
    // changefreight(val) {
    //   this.logisticsForm.freight_template_id = val;
    // },
    // 保存
    saveSubmit() {

      const p1 = new Promise((req, rej) => {
        this.$refs.basicForm.validate((valid, error) => {
          if (valid) {
            req();
          } else {
            rej({ err: error, name: "basic_information" });
            return false;
          }
        });
      });
      const p2 = new Promise((req, rej) => {
        this.$refs.specificationsForm.validate((valid, error) => {
          if (valid) {
            req();
          } else {
            rej({ err: error, name: "inventory_specifications" });
            return false;
          }
        });
      });
      const p3 = new Promise((req, rej) => {
        this.$refs.explainForm.validate((valid, error) => {
          if (valid) {
            req();
          } else {
            rej({ err: error, name: "product_details" });
            return false;
          }
        });
      });
      // const p4 = new Promise((req, rej) => {
      //   this.$refs.logisticsForm.validate((valid, error) => {
      //     if (valid) {
      //       req();
      //     } else {
      //       rej({ err: error, name: "logistics_settings" });
      //       return false;
      //     }
      //   });
      // });
      Promise.all([p1, p2, p3])
        .then(() => {
          this.loading = true;
          this.specificationsForm.inventory_alert =
            this.specificationsForm.inventory_alert == ""
              ? 0
              : this.specificationsForm.inventory_alert;
          var obj = {
            ...this.basicForm,
            ...this.explainForm,
            // ...this.logisticsForm,
            goodsProductArray: JSON.stringify([this.specificationsForm]),
          };
          obj.category_id = obj.category_id[obj.category_id.length - 1];

          obj.delivery_type = 1; // 现在只有一种快递方式,默认写死
          if (this.id) {
            obj.id = this.id;
          } else {
            obj.id = "";
          }
          addsuppliergoods(obj).then((res) => {
            if (res.code !== 200 || res.status !== 1) {
              this.loading = false;
              this.$messages.error(res.msg);
              return;
            }
            this.$messages.success(res.msg);
            this.loading = false;
            this.$nextTick(() => {
              this.$parent.closeCommodityDrawer();
            });
          });
        })
        .catch((error) => {
          for (var key in error.err)
            if (error.err[key]) {
              console.log(error.err[key][0].message);
              this.$messages.error(error.err[key][0].message);
              this.activeName = error.name;
              break;
            }
        });
    },
  },
};
</script>

<style lang="scss" >
.drawerTitle {
  position: relative;
  padding: 15px;
  background-color: #1890ff;
  color: #fff;
  .close {
    position: absolute;
    right: 30px;
    top: 15px;
    cursor: pointer;
  }
}
.drawerContent {
  padding: 10px 30px;
  .infoView {
    position: relative;
    padding: 20px;
    border: 1px solid #efefef;
    border-radius: 5px;
    .status {
      position: absolute;
      top: 20px;
      right: 20px;
      span {
        font-size: 14px;
        color: #4e5969;
        font-weight: 700;
      }
      i {
        font-style: normal;
        font-size: 14px;
        color: #85ce61;
        font-weight: 700;
        margin-left: 10px;
      }
    }
    .descriptionsLabel {
      width: 65px;
      font-size: 14px;
      color: #4e5969;
      font-weight: 700;
    }
    .descriptionsContent {
      font-size: 14px;
      color: #000;
      font-weight: 700;
    }
  }
  .tabsView {
    margin-top: 10px;
  }
  .el-tabs__nav-wrap::after {
    background-color: #dfe4ed00;
  }
}
.el-upload-list--picture-card .el-upload-list__item-actions {
  width: 90px !important;
  height: 90px !important;
}

.el-upload-list--picture-card .el-upload-list__item-thumbnail {
  width: 90px !important;
  height: 90px !important;
}

.el-upload-list--picture-card .el-upload-list__item {
  width: 90px !important;
  height: 90px !important;
}
.el-upload--picture-card {
  width: 90px !important;
  height: 90px !important;
  line-height: 90px;
}
</style>
